<script setup>
import { computed } from '@vue/reactivity';
import { inject } from 'vue';

const props = defineProps({
    label: String,
    columns: {
        type: Number,
        default: 1
    }
})

const items = inject("items")
const labelStyle = computed(() => {
    if (items.labelWidth) {
        return {
            width: items.labelWidth + 'px'
        }
    }
    return {}
})
const itemStyle = computed(() => {
    var width = Math.floor(100 / items.columns * props.columns) 
    return {
        width: width + '%'
    }
})
</script>

<template>
    <div :style="itemStyle">
        <div :style="labelStyle" class="label">{{ label }}</div>
        <slot></slot>
    </div>
</template>

<style type="scss" scoped>
div.label {
    display: inline-block;
    font-weight: bold;
}
</style>